import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useCart } from '@/contexts/CartContext';
import { useLanguage } from '@/contexts/LanguageContext';
import { getImageUrl } from '@/lib/utils';

export default function Cart() {
  const { items, updateQuantity, removeFromCart, clearCart, totalPrice, totalItems } = useCart();
  const { t } = useLanguage();
  
  // 格式化价格显示
  const formatPrice = (price: number) => {
    return `$${price.toFixed(2)}`;
  };
  
  // 计算单个商品小计
  const calculateItemSubtotal = (price: number, quantity: number) => {
    return formatPrice(price * quantity);
  };
  
  // 空购物车状态
  if (items.length === 0) {
    return (
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-grow flex items-center justify-center py-16 bg-gray-50">
          <div className="container mx-auto px-4 text-center">
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5 }}
              className="bg-white p-8 rounded-xl shadow-md max-w-md mx-auto"
            >
              <div className="w-24 h-24 mx-auto mb-6 text-gray-300">
                <i className="fa-solid fa-shopping-cart text-6xl"></i>
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">{t('emptyCart')}</h2>
              <p className="text-gray-600 mb-8">{t('emptyCartDesc')}</p>
              <Link
                to="/shop"
                className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors"
              >
                {t('startShopping')}
              </Link>
            </motion.div>
          </div>
        </main>
        <Footer />
      </div>
    );
  }
  
  // 购物车有商品状态
   return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow bg-gray-50">
        <div className="container mx-auto px-4 pt-16 pb-8">
           <motion.div
             className="bg-white rounded-2xl shadow-xl p-6 md:p-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <h1 className="text-3xl font-bold text-gray-900 mb-8">{t('yourCart')}</h1>
            

            
            <div className="flex flex-col lg:flex-row gap-8">
              {/* Cart Items - Left Column */}
              <div className="lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50 border-b">
                      <tr>
                        <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">{t('product')}</th>
                        <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">{t('price')}</th>
                        <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">{t('quantity')}</th>
                        <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">{t('subtotal')}</th>
                        <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {items.map((item, index) => (
                        <motion.tr
                          key={item.id}
                          initial={{ opacity: 0, x: -20 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ duration: 0.3, delay: index * 0.1 }}
                          className="border-b hover:bg-gray-50"
                        >
                          <td className="px-6 py-4">
                            <div className="flex items-center space-x-4">
                              <div className="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
                                <img 
                                  src={item.image} 
                                  alt={t(item.nameKey)}
                                  className="w-full h-full object-cover"
                                />
                              </div>
                              <div>
                                <Link to={`/product/${item.id}`} className="text-gray-800 hover:text-blue-600 font-medium">
                                  {t(item.nameKey)}
                                </Link>
                                 <div className="text-sm text-gray-500 mt-1">
                                   <p>{t('steelChoice')}: {t('steelType')}</p>
                                   <p>{t('boHi')}: {t('withBoHi')}</p>
                                 </div>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4 text-gray-700">{formatPrice(item.price)}</td>
                           <td className="px-6 py-4">
                              <div className="flex items-center">
                                <button
                                  onClick={() => updateQuantity(item.id, item.quantity - 1)}
                                  disabled={item.quantity <= 1}
                                  className="w-8 h-8 rounded-full bg-white border border-gray-300 flex items-center justify-center text-gray-700 hover:bg-blue-600 hover:text-white hover:border-blue-600 disabled:opacity-50 transition-all duration-300 shadow-sm"
                                  aria-label="Decrease quantity"
                                >
                                  <i className="fa-solid fa-minus text-sm"></i>
                                </button>
                                <span className="w-10 h-8 mx-2 flex items-center justify-center text-gray-900 font-medium">
                                  {item.quantity}
                                </span>
                                <button
                                  onClick={() => updateQuantity(item.id, item.quantity + 1)}
                                  className="w-8 h-8 rounded-full bg-white border border-gray-300 flex items-center justify-center text-gray-700 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all duration-300 shadow-sm"
                                  aria-label="Increase quantity"
                                >
                                  <i className="fa-solid fa-plus text-sm"></i>
                                </button>
                              </div>
                          </td>
                          <td className="px-6 py-4 font-medium text-gray-900">
                            {calculateItemSubtotal(item.price, item.quantity)}
                          </td>
                          <td className="px-6 py-4">
                            <button
                              onClick={() => removeFromCart(item.id)}
                              className="text-gray-400 hover:text-red-600 transition-colors"
                              aria-label="Remove item"
                            >
                              <i className="fa-solid fa-trash"></i>
                            </button>
                          </td>
                        </motion.tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                
                <div className="p-6">
                  <button
                    onClick={clearCart}
                    className="text-gray-600 hover:text-red-600 font-medium flex items-center"
                  >
                    <i className="fa-solid fa-trash mr-2"></i>
                    {t('clearCart')}
                  </button>
                </div>
              </div>
              
              {/* Order Summary - Right Column (Fixed on desktop) */}
              <div className="lg:w-1/3">
                <div className="bg-white rounded-xl shadow-md sticky top-24 overflow-hidden">
                  <div className="p-6 border-b">
                     <h2 className="text-xl font-bold text-gray-900">{t('orderSummary')}</h2>
                  </div>
                  
                   <div className="p-6">
                     <div className="flex justify-between py-2 border-b">
                       <span className="text-gray-600">{t('subtotal')}</span>
                       <span className="font-medium">{formatPrice(totalPrice)}</span>
                     </div>
                     <div className="flex justify-between py-2 border-b">
                       <span className="text-gray-600">{t('tax')}</span>
                       <span className="font-medium">{t('included')}</span>
                     </div>
                     <div className="flex justify-between py-2 border-b">
                       <span className="text-gray-600">{t('shipping')}</span>
                       <span className="font-medium text-blue-600">{t('calculatedAtCheckout')}</span>
                     </div>
                     
                     <div className="flex justify-between py-4 mt-2">
                       <span className="font-bold text-lg">{t('total')}</span>
                       <span className="font-bold text-lg text-blue-800">{formatPrice(totalPrice)}</span>
                     </div>
                    
                     <div className="flex items-center text-green-600 mt-4 mb-6">
                       <i className="fa-solid fa-truck mr-2"></i>
                       <span className="text-sm">{t('freeUsShipping')}</span>
                     </div>
                    
                     {/* Order Instructions */}

                    
                    {/* Checkout Button */}
                     <Link to="/payment" className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-md hover:shadow-lg flex items-center justify-center text-lg">
                       {t('checkout')}
                     </Link>
                    
                     {/* Payment Methods */}
                     <div className="mt-6">
                       <p className="text-xs text-gray-500 mb-2 text-center">{t('securePayments')}</p>
                       <div className="flex justify-center space-x-3">
                         <i className="fa-brands fa-visa text-xl"></i>
                         <i className="fa-brands fa-mastercard text-xl"></i>
                         <i className="fa-brands fa-cc-amex text-xl"></i>
                         <i className="fa-brands fa-apple-pay text-xl"></i>
                         <i className="fa-brands fa-google-pay text-xl"></i>
                         <i className="fa-brands fa-paypal text-xl"></i>
                       </div>
                     </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </main>
      <Footer />
    </div>
  );
}